<template>
    <div class="list-container">
        <el-container class="bg-white " :style="{ height: pageHeight + 'px' }">
            <el-header>
                <el-aside style="height: 100%;" :style="{ width: leftWidth + 'px' }"
                    class="flex justify-center items-center">
                    <el-button type="primary" class="mr-2" @click="addNewPicClassify" ref="addBtnRef">新增图片分类</el-button>
                    <el-button type="warning">上传图片</el-button>
                </el-aside>
            </el-header>
            <el-container>
                <el-aside :style="{ width: leftWidth + 'px', height: pageHeight - 60 + 'px' }">
                    <aside-list ref="asideRef" @selectId="handleSelectId"></aside-list>
                </el-aside>
                <el-main :style="{ height: pageHeight - 60 + 'px' }">
                    <main-list ref="mainRef"></main-list>
                </el-main>
            </el-container>
        </el-container>
        <public-drawer size="30%" title="新增" ref="addBtnRef" @submit="handleSubmit">
            <el-form :model="classifyForm" ref="formRef" :rules="rules" label-width="80px" :inline="false"
                size="middle">
                <el-form-item label="分类名称" prop="name">
                    <el-input v-model="classifyForm.name"></el-input>
                </el-form-item>
                <el-form-item label="排序" prop="order">
                    <el-input-number v-model="classifyForm.order" :min="1" @change="handleChange" />
                </el-form-item>
            </el-form>
        </public-drawer>
    </div>
</template>
<script setup>
import mainList from './components/main-list.vue';
import asideList from './components/aside-list.vue';
import publicDrawer from '../../components/public-drawer.vue';
import { addImageClassify } from '../../api/image';
import { useImageDrawer } from '../../composables/useDrawer';
import { ref } from 'vue'
// 注：window.innerHeight是浏览器内（包括导航条）页面可用高度。
let pageHeight = 0;
let leftWidth = '220px';
pageHeight = window.innerHeight - 158 || document.body.clientHeight;
const {
    addBtnRef,
    formRef,
    rules,
    classifyForm,
} = useImageDrawer();
const addNewPicClassify = () => {
    addBtnRef.value.openDrawer();
}

const asideRef = ref(null);
const mainRef = ref(null);

const handleSubmit = () => {
    formRef.value.validate((valid) => {
        if (valid) {
            addBtnRef.value.showLoading();
            addImageClassify({ name: classifyForm.name, order: classifyForm.order }).then(res => {
                addBtnRef.value.hideLoading();
                addBtnRef.value.closeDrawer();
            })
        }
    })
}
const handleSelectId = (value) => {
    console.log('得到的id', value);
    mainRef.value.changeImageId(value);
}
</script>
<style scoped lang='scss'>
:deep(.el-header) {
    padding: 0px;
    box-sizing: border-box;
    border-bottom: 1px solid #f3f4f6;
}


.text-name {
    // white-space: nowrap;
    // overflow: hidden;
    // text-overflow: ellipsis;
    width: 100px;
}


:deep(.el-main) {
    padding: 0px;
}

:deep(.list-container) {
    z-index: 9999999999;
}

:deep(.el-overlay) {
    position: static !important;
}

:deep(.el-drawer.rtl) {
    z-index: 9999999 !important;
}
</style>